iT邦幫忙

2022 iThome 鐵人賽

DAY 26
0
Mobile Development

從零開始的Swift開發心路歷程2系列 第 26

【從零開始的Swift開發心路歷程2-Day26】doodle jump小遊戲設計(2)跳起來啦!

  • 分享至 

  • xImage
  •  

昨天我們完成了開始遊戲畫面,今天就來實作遊戲畫面吧!
首先呢,我們要先設定在開始遊戲畫面按下開始遊戲按鈕後的動作

class StartScene:SKScene{
    override func didMove(to view: SKView) {
        self.size = CGSize(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
        scene?.scaleMode = .aspectFill
    }
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        for touch in touches {
            let location = touch.location(in: self)
            let startNode = atPoint(location)
            
            if startNode.name == "startButton"{
                let gameScene = GameScene(size: self.size)
                let transition = SKTransition.crossFade(withDuration: 2)
                self.view?.presentScene(gameScene, transition: transition)
            }
        }
    }
}

UITouch是一個代表螢幕中觸碰位置、力度、大小、移動的類別
而當我觸碰到節點名叫"StartButton"的節點時,就會觸發從開始遊戲畫面轉場至遊戲畫面的動作
到了遊戲畫面後呢,由於Doodle Jump小遊戲的畫面是需要移動的,所以我們就不能使用建立SKScene檔案來刻畫面了
在這個遊戲中,我們需要幾個要素,分別是

  • 人物
  • 人物要往上跳的平台
  • 背景
  • GameOver判定條件
  • 目前分數及歷史最高分數

今天就先來實作觸碰螢幕人物往上跳的功能吧!
在開始之前,我們需要在遊戲畫面的檔案

import SpriteKit
import GameplayKit
class GameScene:SKScene,SKPhysicsContactDelegate{
    //code
}

接著宣告三個SKSpriteNode,分別是背景、人物及人物起跳點、能跟著你人移動的SKCameraNode還有第一次的觸碰事件(起跳動作)

let background = SKSpriteNode(imageNamed: "Background_Clouds")
let player = SKSpriteNode(imageNamed: "CharacterRight_Standing")
let ground = SKSpriteNode(imageNamed: "LandPiece_DarkGreen")
let cam = SKCameraNode()
var firstTouch = false

再來在func didMove(to: SKView)中宣告以下
didMove會在當場景被view呈現時被觸發

 override func didMove(to view: SKView) {
        //設定場景尺寸
        self.size = CGSize(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
        //場景尺寸進行等比例縮放,並填滿畫面
        scene?.scaleMode = .aspectFill
        //設定場景的定位點
        self.anchorPoint = .zero
        
        physicsWorld.contactDelegate = self
        
        background.size = CGSize(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
        background.position = CGPoint(x: size.width/2, y: size.height/2)
        //設定圖層 值越小越下層
        background.zPosition = 1
        addChild(background)
        
        ground.size = CGSize(width: UIScreen.main.bounds.width, height: 150)
        ground.position = CGPoint(x: size.width/2, y: -200)
        ground.zPosition = 5
        //設定縮放大小
        ground.setScale(1.5)
        //創建一個以節點原點為中心的矩形物理實體
        ground.physicsBody = SKPhysicsBody(rectangleOf: ground.size)
        addChild(ground)
        
        player.position = CGPoint(x: size.width/2, y: -50)
        player.zPosition = 10
        player.setScale(1)
        //創建一個以節點原點為中心的圓形物理實體
        player.physicsBody = SKPhysicsBody(circleOfRadius: player.size.height / 2)
        addChild(player)
     
        cam.setScale(1)
        cam.position.x = player.position.x
        camera = cam
 }

還有記得更新你的畫面!

override func update(_ currentTime: TimeInterval) {
        cam.position.y = player.position.y + 350
        background.position.y = player.position.y + 350
    }

如此一來,你就能看到你的畫面上出現人物、背景及平台啦!

接著,我們要讓人物能跟著觸控手勢移動,讓人物的x座標等於手勢的x座標即可!

override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        for touch in touches {
            let location = touch.location(in: self)
            
            player.position.x = location.x
        }
    }

最後,當觸碰事件結束後,讓人物的y座標上升,就能成功讓人物跳起來啦!

 override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        player.physicsBody?.isDynamic = true
        //第一次觸碰時起跳,之後都是碰到平台人往上跳,不需額外手勢
        if firstTouch == false {
            player.physicsBody?.applyImpulse(CGVector(dx: 0, dy: 350))
        }
        firstTouch = true
    }

跳起來是跳起來了,但是腳下原本的平台卻直直往下掉,那不就要摔死了嗎?!

明天,我們就來拯救我們的人物吧!


上一篇
【從零開始的Swift開發心路歷程2-Day25】doodle jump小遊戲設計(1)開始遊戲畫面
下一篇
【從零開始的Swift開發心路歷程2-Day27】doodle jump小遊戲設計(3)拯救人物大作戰!
系列文
從零開始的Swift開發心路歷程230
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言